import React, { Component } from "react";
import listcss from "./index.module.css";
import Item from "../Item";

export default class index extends Component {
  render() {
    // 从props中接收从App父组件传递过来的todos
    const { todos, updateTodo, deleteTodo } = this.props;
    return (
      <ul className={listcss.listMain}>
        {/* 遍历循环 Item 组件 */}
        {todos.map((todo) => {
          // {...todo} 将这个todo都传递给item组件，这种是简写形式
          return (
            <Item
              key={todo.id}
              {...todo}
              updateTodo={updateTodo}
              deleteTodo={deleteTodo}
            />
          );
        })}
      </ul>
    );
  }
}
